<script>
//图片组件
import { mapGetters } from 'vuex';
import * as types from '../../../store/types';
import ImageToolbar from '../cardtoolbar/ImageToolbar';
import ControlTools from './ControlTools.js';
import config from 'config';

export default {
  name: 'ImgItem',
  components: {
    ImageToolbar,
  },
  mixins: [ControlTools],
  props: {
    //itemConfig.url：图片地址
    //itemConfig.scaleMode 图片缩放模式
    itemConfig: {
      type: Object,
      default: () => {},
    },
    //图表配置项ID
    chartId: {
      type: String,
      default: () => '',
    },
  },
  data() {
    return {
      itemUrl: this.itemConfig.url, //图片地址
      imageScaleModes: ['origin', 'uniform', 'stretch'], //图片缩放模式枚举
      backgroundSizeModes: ['', 'contain', '100% 100%'], //背景大小设置选项
      uploadService: `${config.portal.basicUrl}/data/fileupload/staticserver`,
    };
  },
  computed: {
    ...mapGetters(['controls']),
    //图片背景样式
    imageBackground() {
      return `url(${this.itemUrl})`;
    },
    //图片背景大小样式
    imageSize() {
      let mod = this.imageScaleModes.indexOf(this.itemConfig.scaleMode) || 0;
      return this.backgroundSizeModes[mod];
    },
    //控件显示模式
    itemMode() {
      return this.itemUrl ? 'view' : 'edit';
    },
  },
  watch: {
    itemConfig(value) {
      this.itemUrl = this.itemConfig.url;
    },
  },
  methods: {
    //上传图片成功
    uploadSuccess(e) {
      this.itemUrl = e.data;
      this.saveImage();
      this.$emit('imageChanged', this.itemUrl);
    },
    //上传图片失败
    uploadError(e) {
      this.$Message.error('上传图片失败!');
    },
    //保存图片配置
    saveImage() {
      let control = this.controls[this.chartId];
      control.options.url = this.itemUrl;
      control.options.scaleMode = this.itemConfig.scaleMode;
      this.$store.commit(types.UPDATE_CHART_CONFIG, {
        data: { [this.chartId]: control },
      });
    },
  },
};
</script>

<template>
  <div class="img-item-wrapper">
    <ImageToolbar
      v-if="hideTools"
      :chart-id="chartId"
      class="layout-toolbar">
    </ImageToolbar>
    <div
      v-if="itemMode=='edit'"
      class="img-item-edit">
      <Upload
        :show-upload-list="false"
        :on-success="uploadSuccess"
        :on-error="uploadError"
        :format="['jpg','jpeg','png']"
        :action="uploadService"
        type="drag">
        <div class="img-item-drag">
          <Icon
            type="ios-cloud-upload"
            size="52"
            style="color: #3399ff"></Icon>
          <p>点击选择或拖拽文件上传图片</p>
        </div>
      </Upload>
    </div>
    <div
      v-if="itemMode=='view'"
      :style="{backgroundImage:imageBackground,backgroundSize:imageSize}"
      class="img-item-view">
    </div>
  </div>
</template>

<style lang="less">
.img-item-wrapper {
  position: absolute;
  top: 0px;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  .img-item-edit,
  .img-item-view {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .k-upload-drag {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
  }
  .img-item-drag {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #999999;
    cursor: pointer;
  }
  .img-item-view {
    background-repeat: no-repeat;
  }
  .layout-toolbar {
    display: none !important;
  }
}
</style>
